<template>
  <div class="parent">
    <echartDom v-if="isShowEcharts" style="width: 100%; height: 100%" :width="width" :height="height" :option="option" :type="type" />
    <div v-else>
      <px-empty :image-size="50" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive, toRefs, ref, watchEffect } from "vue";
import echartDom from "./chartDom.vue";
// import { queryConsumeChartForDay } from "@/api/waterKanban";
// import { options } from "node_modules/axios/index.cjs";
const props = defineProps({
  width: {
    type: String,
    default: ""
  },
  height: {
    type: String,
    default: ""
  },
  color: {
    type: String,
    default: "#3B82F6"
  },
  type: {
    type: String,
    default: ""
  },
  chartData: {
    type: Array,
    default: () => []
  }
});
const isShowEcharts = ref(false);
const state = reactive({
  option: {},
  heatMapData: []
});
const { option, heatMapData } = toRefs(state);

watchEffect(() => {
  if (JSON.stringify(props.chartData) == "[]") {
    isShowEcharts.value = false;
  } else {
    isShowEcharts.value = true;
  }
  console.log(isShowEcharts.value, "---isShowEcharts.value");

  if (isShowEcharts.value) getoptions();
});

const getoptions = () => {
  // prettier-ignore

  const hours = ["Comprehensive Efficiency(COP)", "External Temperature(℃)", "Humidity(%)", "Cooling Load(kW)", "Pump Efficiency", "Fan Efficiency"];
  // prettier-ignore
  const days = [
    'Fan Efficiency', 'Pump Efficiency', 'Cooling Load(kW)',
    'Humidity(%)', 'External Temperature(℃)', 'Comprehensive Efficiency(COP)',
];
  const data = [
    [0, 0, 0.53],
    [0, 1, 0.87],
    [0, 2, 0.27],
    [0, 3, 0.33],
    [0, 4, 0.58],
    [0, 5, 1.0],
    [1, 0, 0.92],
    [1, 1, 0.18],
    [1, 2, 0.24],
    [1, 3, -0.02],
    [1, 4, 1.0],
    [1, 5, 0.58],
    [2, 0, -0.04],
    [2, 1, 0.43],
    [2, 2, 0.85],
    [2, 3, 1.0],
    [2, 4, -0.02],
    [2, 5, 0.33],
    [3, 0, 0.35],
    [3, 1, 0.13],
    [3, 2, 1.0],
    [3, 3, 0.85],
    [3, 4, 0.24],
    [3, 5, 0.27],
    // [1, 0, 0.92],
    [4, 0, 0.08],
    [4, 1, 1.0],
    [4, 2, 0.13],
    [4, 3, 0.43],
    [4, 4, 0.18],
    [4, 5, 0.87],
    [5, 0, 1.0],
    [5, 1, 0.08],
    [5, 2, 0.35],
    [5, 3, -0.04],
    [5, 4, 0.92],
    [5, 5, 0.53]
  ].map(function (item) {
    return [item[1], item[0], item[2] || "-"];
  });

  option.value = {
    title: {
      text: "Correlation Heatmap of Comprehensive Energy  Efficiency and Ralated Variables",
      right: "center",
      top: "1"
    },
    tooltip: {
      position: "top"
    },
    grid: {
      left: "30px",
      top: "80px",
      bottom: "10px",
      containLabel: true
    },
    xAxis: {
      type: "category",
      data: hours,
      axisLabel: {
        interval: 0
      }
      // splitArea: {
      //   show: true
      // }
    },
    yAxis: {
      type: "category",
      data: days,
      splitArea: {
        show: true
      }
    },
    visualMap: {
      min: 0,
      max: 1,
      calculable: true,
      orient: "vertical",
      itemHeight: 160,
      right: "1%",
      top: "15%",
      inRange: {
        color: ["#3e52c5", "#e3d8d2", "#ba192b"],
        symbolSize: [100, 100]
      }
    },
    series: [
      {
        name: "",
        type: "heatmap",
        data: props.chartData,
        label: {
          show: true
        },
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowColor: "rgba(0, 0, 0, 0.5)"
          }
        }
      }
    ]
  };
};
getoptions();
</script>

<style scoped lang="scss">
.parent {
  float: left;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
</style>
